<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="login-info-user">
            <img src="@/assets/images/user.svg" />
            <div class="login-info-user-info">
              <div class="login-info-user-info-text-top">Admin</div>
              <div class="login-info-user-info-text-bottom">超级管理员</div>
            </div>
          </div>
          <div class="dividing-line"></div>
          <div class="login-info-tiem-address">
            <div class="login-info-tiem-address-text">
              上次登录时间：2025-9-5
            </div>
            <div class="login-info-tiem-address-text">上次登录地址：长春</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <el-calendar v-model="calendarDate">
            <template slot="dateCell" slot-scope="{ date, data }">
              {{ data.day.split("-").slice(1).join("-") }}
              <div>
                <div
                  class="public-margin"
                  v-if="
                    new Date(date).getDay() == '0' ||
                    new Date(date).getDay() == '6'
                  "
                >
                  <el-tag type="success">{{ "休息" }}</el-tag>
                </div>
                <div v-if="checkDate.includes(data.day)" class="public-margin">
                  <el-tag type="danger">{{ "检查" }}</el-tag>
                </div>
              </div>
            </template>
          </el-calendar>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-card class="box-card system-announcement-card">
          <div slot="header" class="clearfix">
            <span>系统公告</span>
          </div>
          <div
            v-for="item in SystemAnnouncementData"
            :key="item.id"
            class="system-announcement-item"
          >
            <div class="system-announcement-item-content">
              <div>{{ "[内容分享]" + item.content }}</div>
              <div>
                <i class="el-icon-time"></i>
                {{ item.date }}
              </div>
            </div>
            <div class="dividing-line"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div id="sales-data-chart" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      calendarDate: new Date(),
      checkDate: ["2025-11-05", "2025-11-08", "2025-11-19"],
      SystemAnnouncementData: [
        { id: 1, content: "系统公告1内容", date: "2020-05-01" },
        { id: 2, content: "系统公告2内容", date: "2020-05-22" },
        { id: 3, content: "系统公告3内容", date: "2020-05-03" },
        { id: 4, content: "系统公告4内容", date: "2020-05-04" },
        { id: 5, content: "系统公告5内容", date: "2020-05-05" },
        { id: 6, content: "系统公告6内容", date: "2020-05-06" },
      ],
    };
  },
  mounted() {
    this.initSalesDataChart();
  },
  methods: {
    initSalesDataChart() {
      var salesDataChart = this.$echarts.init(
        document.getElementById("sales-data-chart")
      );
      salesDataChart.setOption({
        title: {
          text: "客户成交状态",
          left: 0,
          top: 0,
        },
        legend: {
          right: 0,
          top: 0,
        },
        xAxis: {
          type: "category",
          data: ["09-04", "09-05", "09-06", "09-07", "09-08", "09-09", "09-10"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "成交客户",
            data: [140, 30, 160, 60, 100, 160, 80],
            type: "bar",
            itemStyle: {
              color: "#1678ff",
            },
          },
          {
            name: "预约客户",
            data: [80, 10, 100, 40, 90, 60, 60],
            type: "bar",
            itemStyle: {
              color: "#54c41b",
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  margin: 10px;
}
.login-info-user {
  display: flex;
  img {
    width: 100px;
  }
  .login-info-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
    .login-info-user-info-text-top {
      padding: 5px 0;
      font-weight: bold;
    }
    .login-info-user-info-text-bottom {
      padding: 5px 0;
    }
  }
}
.dividing-line {
  height: 1px;
  background-color: #ccc;
  margin: 15px 0;
}
.login-info-tiem-address-text {
  padding: 5px 0;
}
.system-announcement-card {
  .system-announcement-item {
    .system-announcement-item-content {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
    }
  }
}
::v-deep .el-calendar-table .el-calendar-day {
  height: auto;
  min-height: 85px;
}
.public-margin {
  margin: 2px 0;
}
</style>
